<template>
    <div>
        <div v-if="myloading" class="loading">
            <van-loading size="100px" color="#ec344e" />
        </div>
        <div class="activee" v-else>
            <van-notice-bar left-icon="volume-o" :scrollable="false">
                <van-swipe
                  vertical
                  class="notice-swipe"
                  :autoplay="3000"
                  :show-indicators="false"
                >
                  <van-swipe-item v-for="(item,i) in list" :key="i">{{ item.name }}刚参加了活动{{ item.nickname }}</van-swipe-item>
                </van-swipe>
            </van-notice-bar>
            <div class="box">
                <div class="title">
                    <h3>热门活动上线中</h3>
                </div>
                <div class="active_box" v-for="(item,t) in ongoing" :key="t">
                    <img :src="item.image" alt="">
                    <div class="box_bottom">
                        <div class="text1">{{ item.name }}</div>
                        <div class="text2">立即参与中></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    // 做网络请求，导入api
    import { active } from '../../api/index'
    
    export default {
        data(){
            return {
                datas: [],
                list:[],
                ongoing:[],
                myloading: false
            }
        },
    
        // 初始化
       async created(){
            this.myloading = true;
            await active()
            .then(
                content=> {
                    console.log('--->',content.data);
                    let banners = content.data;
                    this.datas = banners;
                    this.list = banners.banner;
                    this.ongoing = banners.ongoing.events;
                }
            )
            // console.log(this.ongoing)
            // 请求之后
            setTimeout(() => {
                // 隐藏loading
                this.myloading = false;
            }, 500);
            },
    }
</script>

<style lang="less">
    .activee{
        width: 100%;
        margin-bottom: 80px;
        .box{
            .title{
                padding: 15px 10px;
                h3{
                    font-size: 18px;
                    font-weight: bold;
                }
            }
            .active_box{
                padding: 0 10px;
                img{
                    width: 94%;
                    border-radius: 20px;
                }
                .box_bottom{
                    margin: 10px 10px 20px 10px;
                    display: flex;
                    justify-content: space-between;
                    .text1{
                        width: 55%;
                        font-size: 12px;
                        font-weight: 600;
                    }
                    .text2{
                        font-size: 16px;
                        color: #50969f;
                    }
                }
            }
        }
    }

    .loading{
        width: 100%;
        margin-top: 100px;
        padding-left: 35%;
    }

    .notice-swipe {
        height: 40px;
        line-height: 40px;
    }
</style>